<template>
    <main-wrap :loading="false" :load="onLoad" :end="finished">
        <template v-slot:header>
            <div class="ctopBox">
                <Header title="收货地址"/>
            </div>
        </template>
        
        <ul class="addressList">
                <li v-for="(dt,i) in lists" :key="dt.addresseeId">
                    <div class="cdBox">
                        <my-checkbox v-model="dt.checked" @click="setData(dt,i)"/>
                    </div>
                    <div class="addresBox">
                        <h5>{{dt.address}}</h5>
                        <p>{{dt.linkName}} {{dt.linkPhone}}</p>
                    </div>
                    <router-link :to="`/address/add?id=${dt.addresseeId}`" class="edit">修改</router-link>
                </li>
        </ul>
        <template v-slot:footer>
            <div class="adBtnBox">
                <my-button v-if="hasChecked" text="立即使用" @click="goUse"/>
                <my-button v-else text="新建收货地址" @click="add"/>
            </div>
        </template>
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import { RadioGroup as vanRadioGroup, Radio as vanRadio } from 'vant';
import Header from '@/components/header.vue'
import mainWrap from '@/components/mainWrap.vue'
import myCheckbox from '@/components/myCheckbox.vue';
import myButton from '@/components/myButton.vue';
import router from '../../router';
export default {
    components:{
        mainWrap,
        vanRadioGroup,
        vanRadio,
        Header,
        myCheckbox,
        myButton
    },
    setup(){
        const store = useStore()

        const state = reactive({
            useAdress:computed(()=>store.state.arApi.useAdress),
            keyword:'',
            lists:[],
            pageIndex:1,
            pageSize:100,
            finished: false,
            hasChecked:false
        })

        onMounted(()=>{
           onLoad()
        })

        const onLoad = async()=> {
            const res = await store.dispatch("arApi/get_address_list");
            if(res.success){
                state.lists = res.data
            }
        }
        const add = ()=>{
            router.push('/address/add')
        }

        const goUse = ()=>{
            router.back()
        }
        const setData = (item,i)=>{
            state.hasChecked = false
            state.lists.forEach((ele,index) =>{
                if(item.addresseeId == ele.addresseeId){
                    ele.checked = !ele.checked
                    ele.checked && (state.hasChecked = true)
                }else{
                   ele.checked = false 
                }
            })
            store.commit('arApi/set_useAdress',item)
            //console.log('useAdress:',state.useAdress)
        }

        return {
            ...toRefs(state),
            onLoad,
            add,
            goUse,
            setData
        }
    }
}
</script>

<style lang="scss" scoped>
    .addressList{
        font-style: normal;
        padding: 30px 40px 0 40px;
        border: 0;
        li{
            display: flex;
            padding: 10px 30px;
            margin: 0 0 20px 0;
            background: #0E6161;
            min-height: 130px;
            color: #fff;
            .cdBox{
                display: flex;
                padding: 0;
                align-items: center;
                justify-content: center;
            }
            .addresBox{
                flex: 1;
                display: flex;
                flex-flow: column;
                justify-content: center;
                padding: 0 10px 0 2px;
                h5{
                    font-size: 28px;
                    font-weight: normal;
                    line-height: 46px;
                }
                p{
                    color: #999;
                }
            }
            .edit{
                display: flex;
                align-items: center;
                text-align: right;
                font-size: 30px;
                color: var(--baseColor);
            }
        }
    }
    .adBtnBox{
        padding: 40px;
    }
</style>